<template>
  <ul class='operate'>
    <li @click="showWX">
      <img :src="imgs.wx" alt="">
      <span>发微信</span>
    </li>
    <li>
      <a :href="'sms:'+info.phone">
        <img :src="imgs.mes" alt="">
        <span>发短信</span>
      </a>
    </li>
    <li>
      <a :href="'tel:'+info.phone">
        <img :src="imgs.phone" alt="">
        <span>打电话</span>
      </a>
    </li>
  </ul>
</template>
<script>
export default {
  props:["info"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        wx:require('../../../assets/img/hpmepage/adviser/wx.png'),
        mes:require('../../../assets/img/hpmepage/adviser/message.png'),
        phone:require('../../../assets/img/hpmepage/adviser/phone.png'),
      }
    };
  },
  methods: {
    showWX(){
      this.$store.state.dialogs.alert.title=""
      this.$store.state.dialogs.alert.content='微信号：'+this.info.wx
      this.$store.state.dialogs.alert.show=true
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.operate {
  display: flex;
  padding: 5px 20px;
  justify-content: space-between;

  li{
    width: 0;
    flex-grow: 1;
    max-width: 100px;
    height: 20px;
    text-align: center;
    box-sizing: border-box;
    padding-left: 15px;

    a{
      display: inline-block;
      width: 100%;
      height: 100%;
      color: #333;
    }

    img{
      float: left;
      width: 15px;
      height: 15px;
      transform: translateY(2.5px);
      margin-right: 5px;
    }
    span{
      font-size: 12px;
      line-height: 20px;
      float: left;
      text-align: center;
    }
  }
}
</style>